// webpack 用的node 的方法 common.js

const path = require("path");

// 第一步引入 安装的包
const htmlWebpackPlugin = require("html-webpack-plugin");
//  第二步实例化
// const htmlWplugin=   new htmlWebpackPlugin() //默认 是index.html

const htmlWplugin = new htmlWebpackPlugin({
  template: path.join(__dirname, "./src/index.html"), // 表示以哪个模块进行打包
  filename: "index.html", // 生成的模块文件名字   看不到 在内存当中
}); //默认 是index.html

module.exports = {
  mode: "development", //   development 开发模式    production 线上模式
  entry: path.join(__dirname, "./src/index.js"), //webpack 打包的入口文件  打包的入口文件的路径  需要采用绝对路径
  output: {
    //  打包的出口文件    出口文件的位置   出口文件的名字
    path: path.join(__dirname, "./dist"), // 出口文件的位置  dist 是一般都默认  dist 表示打包后的文件目录
    filename: "bundle.js",
  },
  // 挂载并且使用插件
  plugins: [htmlWplugin],
  module: {
    rules: [
      // {
      //   test: /\.css$/i,
      //   use: ["style-loader", "css-loader"],
      // },

      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },

      {
        test: /\.scss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },

      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
      {
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        use: [{
          loader:'url-loader',
          options:{
              limit:8192,//限制打包图片的大小：
              esModule:false
              //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
              // name:'images/[name]-[hash:8].[ext]',//images:图片打包的文件夹；
              // //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
              // //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。
          }
          }]}
      ]
  },
};
